<template>
<div id="app">
  <div class="filter-container">
    <el-form :inline="true" class="demo-form-inline">
  <el-form-item>
     <el-button type="success" icon="el-icon-upload" @click="adds">上传</el-button>
  </el-form-item>
</el-form>
  </div>

  <div class="header">
      <!--数据展现table-->
    <el-table 
    :data="tableData"
    border 
    stripe>
        <el-table-column align="center" label="序号" type="index" width="50" />
        <el-table-column align="center" prop="inviteCode" label="帖子编码"/>
        <el-table-column align="center" prop="id" label="id"  sortable/>
         <el-table-column align="center" prop="level" label="状态"/>
          <el-table-column align="center" label="图片"  width="150">
            <template slot-scope="scope">
               <img :src="scope.row.imgUrl" style="height:50px;"/>
            </template>
        </el-table-column>
         <el-table-column align="center" prop="bytime" label="创建时间"  sortable/>
         <el-table-column align="center" prop="updatetime" label="修改时间"/>
        <el-table-column align="center" label="操作"  width="150">
            <template slot-scope="scope">
                <el-button type="primary" size="mini"  @click="edit(scope.row)">上架</el-button>
                <el-button type="danger" size="mini"   @click="del(scope.row)" >下架</el-button>
            </template>
        </el-table-column>
    </el-table>
  </div>
  <div class="pagination">
      <el-pagination @size-change="handleSizeChange" 
                          @current-change="handleCurrentChange" 
                          :current-page="pageNum" 
                          :page-sizes="[5,10,15,20]" 
                          :page-size="pageSize" 
                           layout="total, sizes, prev, pager, next, jumper" 
                          :total="dataSize">
             </el-pagination>
  </div>
  <upperImg ref="upperImg" @getData='getData'></upperImg>
</div>
</template>
<script>
import { getListLunbotu,Upper} from '@/api/lunbotu';
import upperImg from "../delog/upperImg";
export default {
  name: 'user',
 components: {
     upperImg
  },
  data () {
    return {
    src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
      index:'',
        tableData: [{}], // 表格数据
        pageNum: 1, // 页数
        pageSize: 5, // 每页大小
        dataSize: 0, // 总条数
        inviteid:'',
        invitetitle:'',
        invitetype:''
    }
  },
  mounted () {
      // 获取数据
      this.getData()
  },
  methods: {
    //查询所有数据
      getData() {
        let obj={
             pageNum:this.pageNum,
             pageSize:this.pageSize
        }
        getListLunbotu(obj).then(response => {     
        if(response.data.responseCode===200){
                this.tableData=response.data.data.list;
                this.dataSize=response.data.data.total
        }else{
        this.$message({
          showClose: true,
          message: '错了哦，没找到数据',
          type: 'error'
        });
          }
      
      })
      },
      // 每页条数
      handleSizeChange(val){
        this.pageSize = val
         this.getData()
      },
      // 第几页
      handleCurrentChange(val){
        this.pageNum = val
         this.getData()
      },adds(){
        console.log("===");
        
          this.$refs.upperImg.open(true)
      },
      //删除
      del(val){        
          this.$confirm("下架商品中...., 是否继续?", "提示", {
          confirmButtonText: "继续",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            //  deleteInvite
            let obj={
                 id:val.id,
                 level:1
            }
              Upper(obj).then(response => {     
                if(response.data.responseCode===200){
                this.getData()
          this.$message({
            type: 'success',
            message: '下架成功!'
          });
                }
              }).catch(error=>{
                  this.$message({
              type: "error",
              message: "失败！"
            });
              })
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消操作"
            });
          });

      },
    
      edit(val){
           this.$confirm("上架商品中...., 是否继续?", "提示", {
          confirmButtonText: "继续",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            //  deleteInvite
            let obj={
                 id:val.id,
                 level:2
            }
              Upper(obj).then(response => {     
                if(response.data.responseCode===200){
                this.getData()
          this.$message({
            type: 'success',
            message: '上架成功!'
          });
                }
              }).catch(error=>{
                  this.$message({
              type: "error",
              message: "失败！"
            });
              })
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消操作"
            });
          });

      }
  },
  watch: {
    pageNo: function() {
      this.getData()
    },
    // 监听页面大小
    pageSize: function() {
      this.getData()
    }
  }
}
</script>

<style scoped>
.pagination {
  margin-top: 10px;
  text-align: right;
  
}
.filter-container {
  margin-top: 20px;
  float: right;
  margin-bottom: 20px
}
.filter-item {
  margin-left: 5px;
}
</style>